﻿<!DOCTYPE html>
<html lang="en-us" id="extr-page">
<head>
    <meta charset="utf-8">
    <title>智慧公交 - 登录</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

    <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production-plugins.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.min.css">

    <!-- SmartAdmin RTL Support -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.min.css">

    <!-- We recommend you use "your_style.css" to override SmartAdmin
         specific styles this will also ensure you retrain your customization with each SmartAdmin update.
    <link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->
    <!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/demo.min.css">

    <!-- Sweet Alert -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <!-- Ladda style -->
    <link href="css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">

    <!-- #FAVICONS -->
    <link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon/favicon.ico" type="image/x-icon">
    <style>

        /**, *:before, *:after {
            -webkit-box-sizing: inherit;
            -moz-box-sizing: inherit;
            box-sizing: inherit;
        }*/
        .ui.divider {
            margin: 1rem 0rem;
            line-height: 1;
            height: 0em;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(0,0,0,0.85);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            font-size: 1rem;
        }

        .ui.header {
            border: none;
            margin: calc(2rem - 0.165em ) 0em 1rem;
            padding: 0em 0em;
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Liberation Sans","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif;
            font-weight: bold;
            line-height: 1.33em;
            text-transform: none;
            color: rgba(0,0,0,0.8);
        }

            .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
                font-size: 1.285em;
            }

        .git-other-login-method {
            margin-top: 32px !important;
        }

        .field {
            clear: both;
            margin: 0em 0em 1em;
        }

        .ui.horizontal.divider {
            display: table;
            white-space: nowrap;
            height: auto;
            line-height: 1;
            text-align: center;
        }

        .git-other-login-method span {
            font-size: 14px;
            color: #9B9B9B;
            font-weight: normal;
        }

        .ui.horizontal.divider:before, .ui.horizontal.divider:after {
            content: '';
            display: table-cell;
            position: relative;
            top: 50%;
            width: 50%;
            background-repeat: no-repeat;
        }

        .ui.horizontal.divider:after {
            background-position: left 1em top 50%;
        }

        .ui.horizontal.divider:before {
            background-position: right 1em top 50%;
        }

        .ui.horizontal.divider:before, .ui.horizontal.divider:after {
            background-image: url("");
        }

        .git-other-login-method-icon.list-center, .git-register-row .git-other-login-method-icon.list-center {
            width: 100%;
            text-align: center;
        }

        .git-other-login-method-icon .item {
            padding: 5px 12px !important;
        }

        .ui.horizontal.list > .item {
            display: inline-block;
        }


        .git-other-login-method-icon .fa {
            font-size: 16px;
            color: #FFF;
            border-radius: 50%;
            padding: 8px;
            cursor:pointer;
        }

        .icon-logo-weibo {
            background-color: #e32932;
        }

        .icon-logo-wechat {
            background-color: #46d800;
        }

        .icon-logo-qq {
            background-color: #00b0fb;
        }

        .client-form header {
            padding: 12px 13px;
        }

        #loginFrame {
            position: absolute;
            z-index: 13;
            overflow: hidden;
            width: 100%;
            height: calc(100% - 48px);
        }

        #loginFrame iframe {
            width: 125%;
            height: 110%;
            margin-left: -11%;
            margin-top: -48px;
        }

        #loginLoading {
            background-color: #FFF;
            position: absolute;
            width: 100%;
            height: calc(100% - 48px);
            z-index: 12;
            text-align: center;
            font-size: 24px;
        }

        #loginLoading span {
            margin-top: 120px;
            display: block;
        }

       #closeLoginFrame {
            cursor: pointer;
        }

        #closeLoginFrame i {
            font-size: 16px;
            
        }

    </style>
</head>

<body class="animated fadeInDown" style="min-height:100%">

    <header id="header">

        <div id="logo-group">
            <span id="logo"> <img src="img/logo.png" alt="智慧公交"> </span>
        </div>

        <span id="extr-page-header-space"> <span class="hidden-mobile hidden-xs">没有账号?</span> <button onclick='gotoreg()' class="btn btn-danger">1分钟完成注册</button> </span>

    </header>

    <div id="main" role="main">

        <!-- MAIN CONTENT -->
        <div id="content" class="container">

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 hidden-xs hidden-sm">
                    <h1 class="txt-color-red login-header-big">智慧公交</h1>
                    <div class="hero">

                        <div class="pull-left login-desc-box-l">
                            <h4 class="paragraph-header">智能的公交出行助手，现已支持济南</h4>
                            <div class="login-app-icons">
                                <a href="javascript:void(0);" class="btn btn-danger btn-sm">在线试用</a>
                                <a href="javascript:void(0);" class="btn btn-danger btn-sm">下载应用</a>
                            </div>
                        </div>

                        <img src="img/demo/iphoneview.png" class="pull-right display-image" alt="" style="width:210px">

                    </div>

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            <h5 class="about-heading">全新公交出行体验</h5>
                            <p>
                                我们拥有包括桌面浏览器、Android APP、iOS APP、手机H5网页、微信公众号、微信小程序、支付宝生活号在内的各类入口，方便快捷。
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            <h5 class="about-heading">全新的界面交互</h5>
                            <p>
                                不拘传统，全新的交互和流畅动画给您轻松地公交出行体验
                            </p>
                        </div>
                    </div>

                </div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
                    <div class="well no-padding">
                        <form id="login-form" class="smart-form client-form">
                            

                            <header id="loginCaption">
                                登录<div id="closeLoginFrame" style="display:none" class="pull-right"><i class="fa fa-times"></i></div>
                            </header>
                            <div>
                                <div id="loginFrame" style="display:none"></div>
                                <div id="loginLoading" style="display:none">
                                    <span>Loading……</span>
                                </div>
                                <fieldset id="loginContext">
                                    <input type='hidden' name='mothed' value='checkLoginWithPassword' />
                                    <section>
                                        <label class="label">手机号/邮箱</label>
                                        <label class="input">
                                            <i class="icon-append fa fa-user"></i>
                                            <input type="text" name="account" id='account'>
                                            <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i> 请输入手机号或邮箱</b>
                                        </label>
                                    </section>

                                    <section>
                                        <label class="label">密码<a class="pull-right" href="forgotpassword.html">忘记密码?</a></label>
                                        <label class="input">
                                            <i class="icon-append fa fa-lock"></i>
                                            <input type="password" name="password" id='password'>
                                            <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> 请输入密码</b>
                                        </label>
                                    </section>

                                    <section>
                                        <label class="checkbox">
                                            <input type="checkbox" name="remember" id="remember" checked="">
                                            <i></i>永久记住登录状态(直到更改密码)
                                        </label>
                                    </section>
                                    <section>
                                        <button type="submit" class="btn btn-primary btn-lg btn-block ladda-button ladda-button-demo">
                                            登录
                                        </button>
                                    </section>
                                    <div class="field">
                                        <div class="ui horizontal divider header git-other-login-method">
                                            <span>
                                                其他方式登录
                                            </span>
                                        </div>
                                        <div class="ui horizontal list git-other-login-method-icon list-center">
                                            <div class="item">
                                                <i class="fa fa-qq icon-logo-qq" title="使用QQ账号登录"></i>
                                            </div>
                                            <div class="item">
                                                <i class="fa fa-wechat icon-logo-wechat" title="使用微信账号登录"></i>
                                            </div>
                                            <div class="item">
                                                <i class="fa fa-weibo icon-logo-weibo" title="使用微博账号登录"></i>
                                            </div>

                                        </div>
                                    </div>
                                </fieldset>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--================================================== -->
    <!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
    <script src="js/plugin/pace/pace.min.js"></script>

    <script src="js/libs/jquery-2.1.1.min.js"></script>
    <script src="js/libs/jquery-ui-1.10.3.min.js"></script>

    <!-- IMPORTANT: APP CONFIG -->
    <script src="js/app.config.js"></script>

    <!-- JS TOUCH : include this plugin for mobile drag / drop touch events
    <script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->
    <!-- BOOTSTRAP JS -->
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <!-- JQUERY VALIDATE -->
    <script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>
    <script src="js/plugin/jquery-validate/localization/messages_zh.js"></script>

    <!-- JQUERY MASKED INPUT -->
    <script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

    <!--[if IE 8]>

        <h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

    <![endif]-->
    <!-- Ladda -->
    <script src="js/plugin/ladda/spin.min.js"></script>
    <script src="js/plugin/ladda/ladda.min.js"></script>
    <script src="js/plugin/ladda/ladda.jquery.min.js"></script>

    <!-- Sweet alert -->
    <script src="js/plugin/sweetalert/sweetalert.min.js"></script>


    <!-- MAIN APP JS FILE -->
    <script src="js/app.min.js"></script>

    <script type="text/javascript">

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.hash.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return "";
        }

        function gotoreg() {
            window.location.href = "register.html";
        }

        if (localStorage.account) {
            $('#account').val(localStorage.account);
        }
        if (localStorage.password) {
            $('#password').val(localStorage.password);
        }
        runAllForms();
        var l = $('.ladda-button-demo').ladda();
        $(function () {
            $(".icon-logo-wechat").click(function () {
                $("#loginFrame").html('<iframe scrolling="no" frameborder="0" src="https://localhost:44397/api/OAuth/Wechat?pc=true&redirect=' + encodeURIComponent(location.protocol + "//" + location.host + '/loading.html?state=Wechat') + '"></iframe>');
                $("#loginLoading").fadeIn("fast");
                $("#closeLoginFrame").show();
                $("#loginFrame").fadeIn("normal");
            });
            $(".icon-logo-qq").click(function () {
                $("#loginFrame").html('<iframe scrolling="no" frameborder="0" src="https://localhost:44397/api/OAuth/QQ?pc=true&redirect=' + encodeURIComponent(location.protocol + "//" + location.host + '/loading.html?state=QQ') + '"></iframe>');
                $("#loginLoading").fadeIn("fast");
                $("#closeLoginFrame").show();
                $("#loginFrame").fadeIn("normal");

            });
            $(".icon-logo-weibo").click(function () {
                alert("暂未开放")
            });
            $("#closeLoginFrame").click(function () {
                $("#loginLoading").hide();
                $("#closeLoginFrame").hide();
                $("#loginFrame").fadeOut("fast");
            })
            jQuery.validator.addMethod("account", function (value, element) {
                var length = value.length;
                var mobile = /^1[3-8][0-9]{9}$/;
                var email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                return this.optional(element) || (email.test(value) || mobile.test(value));
            }, "请输入正确的账号");
            // Validation
            $("#login-form").validate({
                // Rules for form validation
                rules: {
                    account: {
                        required: true,
                        account: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    }
                },

                // Do not change code below
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                },
                submitHandler: function (form) {
                    l.ladda('start');
                    $.ajax({
                        type: "POST",
                        url: apiUrl + "User/Login",
                        data: { account: $("#account").val(), password: $("#password").val(), rememberMe: $('#remember').val() == 'on' },// 你的formid
                        dataType: "json",
                        async: false,
                        error: function (request) {
                            swal("网络异常", "请检查网络连接，也可能是服务器暂时故障", "error");
                            l.ladda('stop');
                        },
                        success: function (data) {
                            console.log(data);
                            if (data.status.code > 0) {
                                swal("出现错误", data.status.msg + "[ERROR CODE:" + data.status.code + "]", "error");
                            } else {
                                swal("登陆成功", "正在前往登录前页面，请稍后……", "success");
                                localStorage.account = $('#account').val();
                                sessionStorage.password = $('#password').val();
                                localStorage.token = data.result.token;
                                if ($('#remember').val() == 'on') {
                                    localStorage.password = $('#password').val();
                                } else {
                                    localStorage.removeItem("password");
                                }
                                location.href = sessionStorage.fromUrl || "index.html";
                            }
                            l.ladda('stop');
                        }
                    });
                }
            });
        });
    </script>

</body>
</html>